<template>
	<view class="detail">
		<view class="listbg" :style="{'background-image':'url('+songDetail.al.picUrl+')'}"></view>
	<!-- 顶部样式 -->
		<mucishead :title="songDetail.name" :icon="true" color="#fff"></mucishead>
		<!-- 列表滚动区域 -->
		<view class="container" v-show="!isLoading">
			<scroll-view scroll-y="true" >
				
				<!-- 音乐播放图 -->
					<view class="detail-play"  @tap="handleToPlay">
						<image :src="songDetail.al.picUrl" :class="{'detail-play-run':isplayRotate}" mode=""></image>

						<text class="iconfont" :class="iconPlay"></text>
						<view></view>
					</view>
				
				<!-- 歌词部分 -->
				<view class="detail-lyric">
					<view class="detail-lyric-wrap" :style="{transform:'translateY('+ -(lyricIndex -1)*82+'rpx)'}">
						<!-- <view class="detail-lyric-item">测试文字</view> -->
						
						<view class="detail-lyric-item" :class="{active: lyricIndex == index}" v-for="(item,index) in songlyric" :key="index">{{item.lyric}}</view>
					</view>
				</view>
				
				
				<!-- 推荐音乐区域 -->
				<view class="detail-like">
					<!-- 标题区域 -->
					<view class="detail-like-head">喜欢这首歌的人也听</view>
					<!-- 歌曲列表区域 -->
					<view class="detail-like-item" v-for="(item,index) in songSimi" :key="index" @tap="handleTosimi(item.id)">
						<!-- 歌曲图片 -->
						<view class="detail-like-img">
							<image :src="item.album.picUrl" mode=""></image>
						</view>
						<!-- 歌名 -->
						<view class="detail-like-song">
							<view>{{item.name}}</view>
							<!-- 歌曲 独家、SQ -->
							<view>
								<image v-if="item.privilege.flag > 60 && item.privilege.flag < 70" src="../../static/images/dujia.png" mode=""></image>
								<image v-if="item.privilege.maxbr == 999000" src="../../static/images/sq.png" mode=""></image>
								{{item.album.artists[0].name}}-{{item.name}}
							</view>
						</view>
						<!-- 播放按钮 -->
						<text class="iconfont icon-timeout"></text>
					</view>
				</view>
			
				<!-- 详情页及评论 -->
				<view class="detail-comment">
					<view class="detail-comment-head">精彩评论</view>
					<view class="detail-comment-item" v-for="(item,index) in songComment " :key="index">
						<!-- 评论用户头像 -->
						<view class="detail-comment-img">
							<image :src="item.user.avatarUrl" mode=""></image>
						</view>
						<!-- 评论主体区域 -->
						<view class="detail-comment-content">
							<!-- 评论的内容文本 -->
							<view class="detail-comment-title">
							<!-- 评论名称和时间 -->
							<view class="detail-comment-name">
								<view>{{item.user.nickname}}</view>
								<view class="">{{item.time | formatTime}}</view>
							</view>
							<!-- 点赞 -->
							<view class="detail-comment-like">
								{{item.likedCount | formatCount}} <text class="iconfont icon-hot"></text>
							</view>
							</view>
							<view class="detail-comment-text"> {{item.content}}
							</view>
							
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	// 导入公共头部文件
	import mucishead from '../../components/mucishead/mucishead.vue'
	// 导入icon样式表
	import '@/common/iconfont.css'
	//导入api文件
	import {songDetail,songSimi,songComment,songlyric,songUrl} from '../../common/api.js'
	export default {
		data() {
			return {
				songDetail:{
					al:{picUrl:''},
					ar:{name:''}
				},
				songSimi:[],
				songComment:[],
				songlyric:[],
				lyricIndex: 0,
				iconPlay:'icon-play',
				isplayRotate:true,
				isLoading:true
			}
		},
		components:{
			mucishead
		},
		onLoad(options) {
			this.getMuic(options.songId);
		},
		onUnload(){
			// 清除定时器
			this.cancelLyrindex()
			
			//在H5中 退出音乐的时候 销毁当前实例 
			//#ifdef H5
			this.bgAudioManager.destroy()
			//#endif
			
		},
		onHide(){
			//清除定时器
			this.cancelLyrindex()
			
			//在H5中 退出音乐的时候 销毁当前实例
			//#ifdef H5
			this.bgAudioManager.destroy()
			//#endif
		},
		methods: {
			getMuic(songId){
					
					this.$store.commit('NEXT_ID',songId)
				
					// 页面加载
					uni.showLoading({
						title:'加载中...'
					})
					this.isLoading = true;
				
				Promise.all([songDetail(songId),songSimi(songId),songComment(songId),songlyric(songId),songUrl(songId)]).then((res)=>{
				
				// console.log(res[4][1])
				// 当请求接口 == 200的时候  调用播放api
				if(res[4][1].data.code == '200'){
					// #ifdef MP-WEIXIN
					this.bgAudioManager = uni.getBackgroundAudioManager();
					this.bgAudioManager.title = this.songDetail.name;
					// #endif
					
					// #ifdef H5
					// 判断是否有歌在播放
					if(!this.bgAudioManager){
						this.bgAudioManager = uni.createInnerAudioContext();
					}
					this.iconPlay = 'icon-timeout';
					this.isplayRotate = false;
					// #endif
					
					this.bgAudioManager.src = res[4][1].data.data[0].url || '';
					// 监听定时器
					this.listenLyrIndex();
					// 监听播放的时候
					this.bgAudioManager.onPlay(()=>{
				    this.iconPlay = 'icon-play';
					this.isplayRotate = true;
					// 监听定时器
					this.listenLyrIndex();					});
					// 监听暂停的时候
					this.bgAudioManager.onPause(()=>{
					this.iconPlay = 'icon-timeout';
					this.isplayRotate = false
							// 清除定时器
					this.cancelLyrindex();
						});
						
						// 播放结束后 播放下一首歌曲
						this.bgAudioManager.onEnded(()=>{
							this.getMuic(this.$store.state.nextId);
						})
						
				}
				// 当请求接口songDetail == 200的时候 获取歌曲详细信息
				if(res[0][1].data.code == '200'){
					this.songDetail = res[0][1].data.songs[0];
				}
				if(res[1][1].data.code == '200'){
					this.songSimi = res[1][1].data.songs;
				}
				if(res[2][1].data.code == '200'){
					this.songComment = res[2][1].data.hotComments;
					// console.log(this.songComment)
				}
				if(res[3][1].data.code == '200'){
					let lyric = res[3][1].data.lrc.lyric;
					// console.log(lyric)
					let re = /\[([^\]]+)\]([^\[]+)/g;
					var res = [];
					lyric.replace(re,($0,$1,$2)=>{
						res.push({"time":this.formatTimeSec($1),"lyric":$2});
					});
					this.songlyric = res;
				}
					// 当所有的都已经加载完成后
					this.isLoading = false;
					uni.hideLoading();
					
					  });
					},
					
			// 处理时间格式
			formatTimeSec(value){
					let arr = value.split(':');
					return (Number(arr[0]*60) + Number(arr[1])).toFixed(1);
			},	
			// 监听点击播放
			handleToPlay(){
				// console.log(this.bgAudioManager)
							// 如果是播放状态就开始播放
							if(this.bgAudioManager.paused){
								this.bgAudioManager.play();
							}else{ // 否则暂停播放
								this.bgAudioManager.pause();
							}
						},
						
		
			// 定时器
			listenLyrIndex(){
				clearInterval(this.timer);
				this.timer = setInterval(()=>{
					for(var i=0;i<this.songlyric.length;i++){
						if(this.bgAudioManager.currentTime > this.songlyric[this.songlyric.length-1].time ){
							this.lyricIndex = this.songlyric.length-1;
							break;
						}
						if(this.bgAudioManager.currentTime > this.songlyric[i].time && this.bgAudioManager.currentTime < this.songlyric[i+1].time ){
							this.lyricIndex = i;
						}
	
					}
				},500);
			},
			// 清除定时器
			cancelLyrindex(){
				clearInterval(this.timer);
			},
			
			handleTosimi(id){
				this.getMuic(id)
			}
			
		},
		
		
	}
</script>

<style scoped>
.detail-play{
	width: 580rpx;
	height: 580rpx;
	background: url(~@/static/images/disc.png);
	background-size: cover;
	margin: 214rpx auto 0 auto;
	position: relative;
}
.detail-play image{
	width: 370rpx;
	height: 370rpx;
	border-radius: 50%;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	animation: 10s linear move infinite;
	animation-play-state: paused;
}
.detail-play .detail-play-run{
	animation-play-state: running;
	@keyframes move{
		from{transform: rotate(0deg);}
		to{transform: rotate(360deg);}
	}
}
.detail-play text {
	width: 100rpx;
	height: 100rpx;
	font-size: 100rpx;
	color: #fff;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}
.detail-play view{
	width: 230rpx;
	height: 360rpx;
	background: url(~@/static/images/need.png);
	position: absolute;
	left: 100rpx;
	right: 0;
	top: -200rpx;
	margin: auto;
	background-size: cover;
}
.detail-lyric{
	font-size: 32rpx;
	line-height: 82rpx;
	height:246rpx;
	text-align: center;
	overflow: hidden;
	color: #6f6e73;
}
.detail-lyric-wrap{
	transition: .5s;
}
.detail-lyric-item{
	height: 82rpx;
}
.detail-lyric-item.active{
	color: #fff;
}

.detail-like{
	margin: 0 30rpx;
}
.detail-like-head{
	font-size: 36rpx;
	color: #FFFFFF;
	margin: 50rpx 0;
}
.detail-like-item{
	display: flex;
	align-items: center;
	margin-bottom: 28rpx;
}
.detail-like-img{
	width: 82rpx;
	height: 82rpx;
	border-radius: 20rpx;
	overflow: hidden;
	margin-right: 20rpx;
}
.detail-like-img image{
	width: 100%;
	height: 100%;
}
.detail-like-song{
	flex: 1;
	color: #c6c2bf;
}
.detail-like-song view:nth-child(1){
	font-size: 28rpx;
	color: #FFFFFF;
	margin-bottom: 12rpx;
}
.detail-like-song view:nth-child(2){
	font-size: 22rpx;
}
.detail-like-song image{
	width: 26rpx;
	height: 20rpx;
	margin-right: 10rpx;
}
.detail-like-item text{
	font-size: 50rpx;
	color: #c6c2bf;
}


.detail-comment{
	margin:0 30rpx;
}
.detail-comment-head{
	font-size: 36rpx;
	color: #FFFFFF;
	margin: 50rpx 0;
}
.detail-comment-item{
	margin-bottom: 28rpx;
	display: flex;
}
.detail-comment-img{
	width:64rpx;
	height:64rpx;
	border-radius: 50%;
	overflow: hidden;
	margin-right: 18rpx;
}
.detail-comment-img image{
	width: 100%;
	height: 100%;
}
.detail-comment-content{flex: 1;}
.detail-comment-title{
	display: flex;
	justify-content: space-between;
}
.detail-comment-name{	
	color:#cbcacf;
}
.detail-comment-name view:nth-child(1){
	font-size: 26rpx;
}
.detail-comment-name view:nth-child(2){
	font-size: 20rpx;
}
.detail-comment-like{
	font-size: 28rpx;
    color:#cbcacf;
}
.detail-comment-text{
	font-size: 28rpx;
	line-height: 40rpx;
	color: #FFFFFF;
	margin-top: 20rpx;
	border-bottom:1px #e0e0e0 solid;
	padding-bottom: 40rpx;
}
</style>
